<html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>workerman-chat PHP聊天室 Websocket(HTLM5/Flash)+PHP多进程socket实时推送技术</title>
  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link href="/css/style.css" rel="stylesheet">
    <style>
        /*外框样式*/
        .bubbleDiv{
            width: 700px;
            margin: 0 auto;
            height: 600px;
            border: 1px solid #4a4f58;
            border-radius: 10px;
            border-color: #0d6fb8;
            overflow-y: scroll;
        }
        /*对话样式*/
        .bubbleItem{
            width: 100%;
            clear: both;
        }
        .bubble{
            max-width: 400px;
            position: relative;
            line-height: 30px;
            padding-left: 10px;
            padding-top: 3px;
            padding-bottom: 3px;
            border-radius: 7px;
            margin-top: 15px;
            padding-right: 10px;
            display: inline-block;
        }
        .leftBubble{
            position: relative;
            margin-left: 25px;
            border: 1px solid #00b6b6;
            background-color: #f8fdfc;
        }
        .leftBubble .bottomLevel{
            position: absolute;
            top: 10px;
            left: -10px;
            border-top: 10px solid #00b6b6;
            border-left: 10px solid transparent;
        }
        .leftBubble .topLevel{
            position: absolute;
            top: 11px;
            left: -8px;
            border-top: 10px solid #f8fdfc;
            border-left: 10px solid transparent;
            z-index: 100;
        }
        .rightBubble{
            position: relative;
            margin-right: 25px;
            float: right;
            border: 1px solid #aaa;
        }
        .rightBubble .bottomLevel{
            position: absolute;
            bottom: 11px;
            right: -10px;
            border-bottom: 10px solid #aaa;
            border-right: 10px solid transparent;
        }
        .rightBubble .topLevel{
            position: absolute;
            bottom: 12px;
            right: -8px;
            border-bottom: 10px solid #fff;
            border-right: 10px solid transparent;
            z-index: 100;
        }
        .leftTitle {
            position:relative;
            margin : 10px 0px 0px 15px;
        }
        .rightTitle {
            position:relative;
            margin : 10px 15px 0px 0px;
            float: right;
        }
        .msgBox > .loginIn {
            padding: auto;
            color: #0d6fb8;
            text-align: center;
        }
        .msgBox > .loginOut {
            margin: auto;
            color: #888888;
            text-align: center;
        }
        .msgBox:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
  <script type="text/javascript" src="/js/swfobject.js"></script>
  <script type="text/javascript" src="/js/web_socket.js"></script>
  <script type="text/javascript" src="/js/jquery.min.js"></script>

  <script type="text/javascript">
    if (typeof console == "undefined") {    this.console = { log: function (msg) {  } };}
    // 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
    WEB_SOCKET_SWF_LOCATION = "/swf/WebSocketMain.swf";
    // 开启flash的websocket debug
    WEB_SOCKET_DEBUG = true;
    var ws, name, client_list={};

    // 连接服务端
    function connect() {
       // 创建websocket
       ws = new WebSocket("ws://"+document.domain+":8282");
       // 当socket连接打开时，输入用户名
       ws.onopen = onopen;
       // 当有消息时根据消息类型显示不同信息
       ws.onmessage = onmessage; 
       ws.onclose = function() {
    	  console.log("连接关闭，定时重连");
          connect();
       };
       ws.onerror = function() {
     	  console.log("出现错误");
       };
    }

    // 连接建立时发送登录信息
    function onopen()
    {
        if(!name)
        {
            show_prompt();
        }
//        var _login = '<div class="msgBox"><p class="loginOut">'+name+' 进入了房间</p></div>';
//        $(".bubbleDiv").append(_login);
        var _msg = '{"type":"login","username":"'+name+'","room_id":"1"}';
        ws.send(_msg);
    }

    // 服务端发来消息时
    function onmessage(e)
    {
        var data = eval("("+e.data+")");
        console.log(data);
        switch (data['type']){
            case 'ping' : ws.send('{"type":"pong"}');
                break;
            case 'login' :
                var _login = '<div class="msgBox"><p class="loginIn">'+data['username']+' 进入了房间</p></div>';
                $(".bubbleDiv").append(_login);
                break;
            case 'say'   :
                var _msg = '';
                if(data['say_type'] == 1){ //自己发言
                    _msg += '<div class="msgBox">' +
                        '<div class="rightTitle"><span>'+data['say_time']+'</span>&nbsp;<span>'+data['username']+'</span></div>' +
                        '<div class="bubbleItem"><span class="bubble rightBubble">'+data['chat']+'<span class="bottomLevel"></span>' +
                        '<span class="topLevel"></span></span></div></div>';
                }else{ //接收信息
                    _msg += '<div class="msgBox">' +
                        '<div class="leftTitle"><span>'+data['username']+'</span>&nbsp;<span>'+data['say_time']+'</span></div>' +
                        '<div class="bubbleItem"><span class="bubble leftBubble">'+data['chat']+'<span class="bottomLevel"></span>' +
                        '<span class="topLevel"></span></span></div></div>';
                }
                $(".bubbleDiv").append(_msg);
                break;
            case 'logout'   :
                var _logout = '<div class="msgBox"><p class="loginOut">'+data['username']+' 离开了房间</p></div>';
                $(".bubbleDiv").append(_logout);
                break;
//            default :
//                var _error = '<div class="msgBox"><p class="loginOut">系统异常</p></div>';
//                $(".bubbleDiv").append(_error);
        }
    }

    // 输入姓名
    function show_prompt(){
        name = prompt('输入你的名字：', '');
        if(!name || name=='null'){
            name = '游客';
        }
    }

    $(function () {
        $("#sub").on('click',function () {
            var _chat = $("input[name='chat']").val();
            _chat =_chat.replace(/"/g, '\\"').replace(/\n/g,'\\n').replace(/\r/g, '\\r');
            ws.send('{"type":"say","stype":"1","username":"'+name+'","chat":"'+_chat+'"}');
            $("input[name='chat']").val("");
            $("input[name='chat']").focus();
        })
    })
  </script>
</head>
<body onload="connect();">
<div class="bubbleDiv">
</div>
<div class="">
    <form onsubmit="return false;">
        <input name="chat"><button id="sub">发送</button>
    </form>
</div>
</body>
</html>
